<template>
	<div class="">
		<h2>专题订单</h2>
		<div class="iptsBox">
			<el-form ref="form" :model="form" label-width="80px" inline>
				<el-form-item label="模糊搜索">
					<el-input class="width400 mr20" v-model="query.searchWord" placeholder="请输入用户昵称"></el-input>
				</el-form-item>
				<el-form-item label="订单状态">
					<el-select class="width400 mr20" v-model="query.status" placeholder="请选择订单状态" clearable>
						<el-option label="待支付" :value="1"></el-option>
						<el-option label="已完成" :value="4"></el-option>
						<el-option label="已失效" :value="7"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="订单类型">
					<el-select class="width400" v-model="query.sendType" placeholder="请选择订单类型" clearable>
						<el-option label="图书订单" :value="false"></el-option>
						<el-option label="课程订单" :value="true"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="下单日期">
					<div class="row-me">
						<div class="">
							<el-date-picker style="width:400px" v-model="orderDate" type="daterange" value-format="yyyy-MM-dd"
								range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="getOrderDate">
							</el-date-picker>
						</div>
						<div class="margin-left20">
							<el-button type="text" @click="getToday">今日</el-button>
							<el-button type="text" @click="yesterday">昨日</el-button>
							<el-button type="text" @click="oneMonth">本月</el-button>
							<el-button type="text" @click="lastSevenDay(30)">上月</el-button>
							<el-button type="text" @click="lastSevenDay(365)">本年</el-button>
						</div>
					</div>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleSearch">搜索</el-button>
					<el-button type="default" @click="handleRefresh">重置</el-button>
				</el-form-item>
			</el-form>
			<div class="margin-bottom20">
				<el-button type="primary" @click="handleExport">批量导出</el-button>
			</div>
		</div>
		<el-table ref="singleTable" :data="tableData" style="width: 100%" border>
			<el-table-column type="selection" width="50"></el-table-column>
			<el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
			<el-table-column prop="orderNo" label="订单编号" align="center"></el-table-column>
			<el-table-column prop="userId" label="用户昵称/ID" align="center">
				<template slot-scope="{row}">
					<span>{{row.userName||''}}/{{row.userId||''}}</span>
				</template>
			</el-table-column>
			<el-table-column label="专题信息" align="center" width="500">
				<template slot-scope="scope">
					<div class="row-me row-center">
						<img v-if="scope.row.picture" :src="scope.row.picture" alt="" class="width50 height50 margin-right10">
						<span>{{scope.row.title||''}}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="totalAmount" label="价格" align="center"></el-table-column>
			<el-table-column prop="payAmount" label="实付金额" align="center"></el-table-column>
			<el-table-column label="支付状态" align="center">
				<template slot-scope="{row}">
					<span v-if="row.status==1">未支付</span>
					<span v-else-if="row.status==2">已支付</span>
					<span v-else-if="row.status==6">已退款</span>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="下单时间" align="center">
			</el-table-column>
			<el-table-column label="支付方式" align="center">
				<template slot-scope="scope">
					<span>{{scope.row.payType==1?'支付宝':scope.row.payType==2?'微信':scope.row.payType==3?'兑换码':''}}</span>
				</template>
			</el-table-column>
			<el-table-column label="订单状态" align="center">
				<template slot-scope="scope">
					<span v-if="scope.row.status==1">待支付</span>
					<span v-else-if="scope.row.status==4">已完成</span>
					<span v-else-if="scope.row.status==7">已失效</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" width="240" fixed="right">
				<template slot-scope="scope">
					<el-button type="text" size="small" @click="orderDetalis(scope.row.id)">订单详情</el-button>
					<el-button type="text" size="small" @click="doDelete(scope.row)">删除订单</el-button>
					<el-button type="text" size="small" @click="refund(scope.row)" v-if="scope.row.status!=1">退款</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="pagination">
			<el-pagination background layout="->,total,sizes, prev, pager, next" :page-sizes="[10, 20, 30, 40]"
				@size-change="handleSizeChange" :current-page="query.pageNo" :total="pageTotal"
				@current-change="handlePageChange"></el-pagination>
		</div>

		<!-- 退款 -->
		<el-dialog title="退款" :visible.sync="dialogVisibleRefund" width="30%">
			<el-form ref="refundForm" :model="refundForm" label-width="80px">
				<el-form-item label="退款单号">
					<el-input v-model="refundForm.orderNo" disabled style="width: 240px;"></el-input>
				</el-form-item>
				<el-form-item label="退款金额">
					<el-input v-model="refundForm.refundAmount" style="width: 70px;"></el-input> <span
						class="margin-left10">元</span>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisibleRefund = false">取 消</el-button>
				<el-button type="primary" @click="doRefund()">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 订单详情 -->
		<el-dialog title="订单详情" :visible.sync="detailVisible" width="60%">
			<orderDetalis :id="detailId" :key="num"></orderDetalis>
			<span slot="footer">
				<el-button @click="detailVisible = false" type="primary">关 闭</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import orderDetalis from "./orderDetalisTit"
	export default {
		components: {
			orderDetalis
		},
		data() {
			return {
				tableData: [],
				form: {},
				tableData: [],
				orderDate: [],
				query: {
					pageNo: 1,
					pageSize: 10,
					type: 2
				},
				pageTotal: 0,
				isShow: true,
				detailVisible: false,
				detailId: '',
				num: 0,
				refundForm: {},
				dialogVisibleRefund: false
			}
		},
		mounted() {
			this.getData()
		},
		methods: {
			doDelete(row) {
				this.$confirm("是否删除该订单", "提示", {
						confirmButtonText: "确认", //确认按钮文字更换
						cancelButtonText: "取消", //取消按钮文字更换
						showClose: true, //是否显示右上角关闭按钮
						type: "warning", //提示类型  success/info/warning/error
					}).then(async () => {
						let res = await this.$postForm('/admin/order/deleteOrder', {
							id: row.id
						});
						if (res.code == 1000) {
							this.getData();
							this.$message.success('操作成功')
						}
						//确认操作
					}).then((data) => {
						//取消操作
					})
					.catch(function(err) {
						//捕获异常
					});
			},
			handleExport() {
				this.query.pageNo = 1
				this.query.pageSize = 1000000000
				let params = this.query
				params.token = localStorage.getItem('token')
				params.appid = localStorage.getItem('appid')
				window.open(this.$host + '/admin/order/exportOrder?' + this.$.getParamsString(params));
			},
			doRefund() {
				this.$refs.refundForm.validate(async valid => {
					if (valid) {
						let res = await this.$postForm('/admin/order/refundOrder', this.refundForm);
						if (res.code == 1000) {
							this.getData();
							this.dialogVisibleRefund = false
							this.$message.success('操作成功')
						}
					}
				});
			},
			refund(row) {
				this.refundForm.id = row.id;
				this.refundForm.orderNo = row.orderNo;
				this.refundForm.refundAmount = row.payAmount;
				this.dialogVisibleRefund = true
			},
			//今日
			getToday() {
				let date = this.$.getNowDate()
				this.orderDate = [date, date]
				this.getOrderDate()
			},
			//昨日
			yesterday() {
				let date = this.$.yesterday()
				this.orderDate = [date, date]
				this.getOrderDate()
			},
			// 最近七天
			lastSevenDay(val) {
				let endDate = this.$.getNowDate()
				let startDate = this.$.getDay(-val)
				this.orderDate = [startDate, endDate]
				this.getOrderDate()
			},
			//最近一个月
			oneMonth() {
				let endDate = this.$.getNowDate()
				let startDate = this.$.getPreMonthDay(endDate, 1)
				this.orderDate = [startDate, endDate]
				this.getOrderDate()
			},
			getOrderDate(val) {
				this.query.startDate = ''
				this.query.endDate = ''
				if (this.orderDate && this.orderDate.length != 0) {
					this.query.startDate = this.orderDate[0]
					this.query.endDate = this.orderDate[1]
				}
			},
			//搜索
			handleSearch() {
				this.$set(this.query, 'pageNo', 1);
				this.getData();
			},
			//重置
			handleRefresh() {
				this.query = {
					pageNo: 1,
					pageSize: 10,
					type: 2
				}
				this.orderDate = []
				this.getData();
			},
			async getData() {
				const res = await this.$get('/admin/order/pageQueryMallOrder', this.query)
				this.tableData = res.data.list
				this.pageTotal = res.data.totalRow
			},
			// 分页导航
			handlePageChange(val) {
				this.$set(this.query, 'pageNo', val);
				this.getData();
			},
			handleSizeChange(val) {
				this.$set(this.query, 'pageSize', val);
				this.getData();
			},
			orderDetalis(id) {
				this.detailVisible = true
				this.detailId = id
				this.num++
			}
		}
	}
</script>

<style scoped="scoped">

</style>